import axios from "axios"
import { useEffect, useState } from "react"

export default function App() {
  // 定义state
  const [isLoading, setIsLoading] = useState(true)
  const [repo, setRepo] = useState({
    repoName: '',
    repoUrl: ''
  })

  // 初始化发一次请求获取最受欢迎的库并显示
  useEffect(() => { // effect回调要求是同步的
    // axios('https://api.github.com/search/repositories?q=re&sort=stars')
    /* axios({
      url: 'https://api.github.com/search/repositories',
      method: 'get',
      params: {
        q: 're',
        sort: 'stars'
      }
    }) */
    // 先定义发请求的异步函数
    async function getRepo() {
      // https://api.github.com/search/repositories?q=re&sort=stars
      // 发异步ajax请求
      const response = await axios.get('https://api.github.com/search/repositories', {
        params: {
          q: 'r', // 查询的关键字是什么
          sort: 'stars' // 根据stars进行排序(返回的仓库列表是排序后)
        }
      })
      // 取出数据
      const result = response.data
      const {name, html_url} = result.items[0] // 根据返回的数据结构编写
      // 更新数据
      setIsLoading(false) // 请求完成了
      setRepo({
        repoName: name,
        repoUrl: html_url
      })
    }

    getRepo()
  }, [])


  // 如果isLoading为true,返回loading页面
  if (isLoading) {
    return <h2>Loading...</h2>
  }
  // 否则返回结果页面
  return (
    <div>most star repo is <a href={repo.repoUrl}>{repo.repoName}</a></div>
  )
}
